{% extends 'base.html' %}

{% block title %}
	systeme de visualisation d'information
{% endblock %}

{% block head %}
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="/media/css/style.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
	<script type="text/javascript">
		var departments = $.parseJSON('{{departments}}'.replace(/&quot;/g,'"').replace(/&#39;/g,"'"));
		var years = $.parseJSON('{{years}}'.replace(/&quot;/g,'"'));
		var data = $.parseJSON('{{data}}'.replace(/&quot;/g,'"').replace(/&#39;/g,"'"));
		function getValueBydepartments(department){
			var tab =[];
			for(var y in data){
				tab.push(data[y][department]);
			}
			return tab;
		}
		function getValueByYearsN(year,tabDepN){
			var tab=[];
			for(var d in data[year]){
					for(var $i=0;$i<tabDepN.length;$i++){
						if(tabDepN[$i]==d){
							tab.push({y:data[year][d],id:d,name:d});
						}
					}
				}
			return tab;
		}
		
		function getValueByD(departement){
			var line="";
			for(var i=0;i<years.length;i++){
					line+="<td>"+data[years[i]][departement]+"</td>";
				}
			return line;
		}
	
	</script>
	<script type="text/javascript" src="/media/js/highcharts.js"></script>
{% endblock %}

{% block content %}
  <!-- entete -->
	<div data-role="header">
		<h1>Visualisation <br>d'information</h1>
	</div>
  <!-- contenu -->
	<div data-role="content" >
		
		<div style="background:url(/media/images/final/header.gif) no-repeat;
			width:300px;
			height:165px;
			text-indent:-999px;
			font-size:0px;
			margin:0 auto 0 auto;
			padding:0;
			border-bottom:1px solid rgba(65, 38, 37, 0.6);">
			
		</div>
		<h1> Que voulez vous visualiser?</h1>
		<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
			 <li><a href="/delinquancePage" data-transition="slide">Délinquance en France</a></li>
			 <li><a href="#" data-transition="slide">.....</a></li>
			 <li><a href="#" data-transition="slide">.....</a></li> 
		</ul>
	</div>
		
	<!-- footer -->
	<div data-role="footer">
	 <br>
	 <br>
	</div>
{% endblock %}
